<template>
  <table class="Formtable" width="100%">
    <tr
      :style="{
        lineHeight: titLineHeight + 'px',
        fontSize: titFontSize + 'px',
        color: titColor,
      }"
    >
      <th
        v-for="(tit, index) in titData"
        :key="tit"
        :style="{ width: SetWidth(index), backgroundColor: titBGColor }"
      >
        {{ tit }}
      </th>
    </tr>
    <tr
      :style="{
        lineHeight: conLineHeight + 'px',
        fontSize: conFontSize + 'px',
        color: conColor,
        backgroundColor: index % 2 ? parityColor[1] : parityColor[0],
      }"
      v-for="(con, index) in contentData"
      :key="index"
    >
      <td
        v-for="item in con"
        :key="item"
        :style="{
          borderBottom: parityColor.length
            ? 'none'
            : '1px solid rgb(231, 231, 231)',
        }"
      >
        {{ item }}
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  name: "SwhFormTable",
  props: {
    // 内容行高
    conLineHeight: {
      type: Number,
      default: 20,
      explain: "内容行高",
      otherVal: "---",
    },
    // 内容字号
    conFontSize: {
      type: Number,
      default: 14,
      explain: "内容字号",
      otherVal: "---",
    },
    // 内容颜色
    conColor: {
      type: String,
      default: "#777",
      explain: "内容颜色",
      otherVal: "---",
    },
    // 隔行换色
    parityColor: {
      type: Array,
      default: () => {
        return [];
      },
      explain: "隔行换色",
      otherVal: "['#fff', '#eee']",
    },
    // 头部行高
    titLineHeight: {
      type: Number,
      default: 20,
      explain: "表头行高",
      otherVal: "---",
    },
    // 头部字号
    titFontSize: {
      type: Number,
      default: 14,
      explain: "表头字号",
      otherVal: "---",
    },
    // 表头颜色
    titColor: {
      type: String,
      default: "#000",
      explain: "表头颜色",
      otherVal: "---",
    },
    // 表头背景色
    titBGColor: {
      type: String,
      default: "#eee",
      explain: "表头背景色",
      otherVal: "---",
    },
    // 指定列宽度
    colWidth: {
      type: Object,
      default: () => {
        return {
          1: "20%",
          2: "40%",
          4: "20%",
        };
      },
      explain: "表头宽度，key代表第几列，未指定宽度的列平均分",
      otherVal: "---",
    },
    // 表头信息
    titData: {
      type: Array,
      default: () => {
        return ["参数", "说明", "类型", "可选值", "默认值"];
      },
      explain: "表头信息：一维数组格式",
      otherVal: "---",
    },
    // 表格内容
    contentData: {
      type: Array,
      default: () => {
        return [];
      },
      explain: "表格内容：二维数组格式",
      otherVal: "[[],[],[]]",
    },
    // 监听表格错误事件
    errorEvent: {
      type: Function,
      explain: "监听表格错误事件",
    },
  },
  setup(props, ctx) {
    // 设置指定列宽度宽度
    const SetWidth = function (index) {
      // index从0 开始+1对应表格列数
      return props.colWidth[index + 1];
    };
    //判断表格内容是否适合,提示错误信息
    const paramsError = function () {
      const cData = props.contentData;
      const tData = props.titData;
      if (cData.length == 0) {
        console.warn("Formtable 未接收到表格内容");
        ctx.emit("errorEvent", "nullData");
      } else {
        for (let i = 0; i < cData.length; i++) {
          if (cData[i].length !== tData.length) {
            // 表格错误信息
            console.warn(
              "Formtable 单行内容个数不等于表头内容个数，表格无法对齐"
            );
            ctx.emit("errorEvent", "errorData");
          }
        }
      }
    };
    paramsError(); //判断表格内容是否适合
    return {
      SetWidth,
    };
  },
};
</script>

<style lang="less" scoped>
.Formtable {
  border-radius: 5px;
  border-collapse: collapse; /*关键代码*/
  -webkit-user-select: text;
  -ms-user-select: text;
  th,
  td {
    text-align: left;
    padding: 20px 10px;
    box-sizing: border-box;
  }
  th {
    background: @HSE;
  }
}
</style>
